<html>
    <head>
        <title>区别于传统 web 开发的注意点</title>
    </head>
    <body>
        <script>
            /*
                        七、区别于传统 web 开发的注意点

                                你之前可能习惯自由的 web 开发，但目前各家小程序都有很多限制。 当然限制是为了在框架层更好的优化用户体验，所以小程序的体验要优于web。

                                并且这些限制只是写法的限制，并不影响功能。  

                                如果你做过微信小程序开发，对这些限制应该已经很了解了。如果没有做过小程序，请仔细阅读本节。


                                1、JS注意

                                            ①、 非H5端，不能使用浏览器自带对象，比如 document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。

                                                因为各家小程序快应用都支持这些对象。

                                            ②、没有这些浏览器自带对象并不影响业务开发，uni提供的api足够完成业务。

                                            ③、uni的api 在编译到web平台运行时，其实也会转为浏览器的js api

                                                        ★、App端若要使用操作window、document的库，需要通过renderjs来实现。

                                            ④、uni 的 api 是多端可用的。在条件编译区，每个平台的专有api也可以使用， 比如 wx、plus等 api 可以分别在微信下和 app 下使用。

                                            ⑤、处于降低小程序向 uni-app迁移的成本的考虑， wx 的api 在app里也可以直接运行，比如写 wx.request 和 uni.request 是一样的，

                                            但是，仍然建议仅在微信的条件编译器区使用wx的api。

                                2、Tag(标签)注意

                                            ①、uni-app 的标签与小程序的tag差不多，与html的tag不一样，比如 div 要改成view， span 要改成 text、a 要改成 navigator.
                                            
                                            ②、处于降低 h5 应用向 uni-app 迁移成本的考虑，写成div、span也可以运行在 app 和 小程序上， 因为 uni-app 编译器会把这些HTML标签编译为小程序标签。

                                               但仍然建议养成新习惯。

                            
                                3、Css注意

                                            ①、虽然大部分css样式在微信小程序和 app中都支持，单推荐使用flex布局模型，这种布局更灵活高效且支持更多平台 (比如 nvue、快应用支持flex布局)

                                            ②、单位方面， uni-app 默认支持 rpx。  这是一种可跨端的通用单位。  详见：  https://zh.uniapp.dcloud.io/tutorial/syntax-css.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D


                                4、工程目录注意

                                            ①、页面文件：  放到pageｓ目录下：
                                            
                                                          推荐方案：  新建一个页面目录，然后创建一个同名的.vue文件，如 /pages/list/list.vue ,  接着在 pages.json 里完成注册。

                                                                     这与小程序的策略相同。

                                            ②、自定义组件：  访到 component 目录

                                            ③、静态资源：   如图片，固定放到 static 目录下。  这是 webpack的规则


                                5、数据绑定方式的注意

                                            uni-app 基于 Vue2.0实现，开发者需要注意 Vue 1.0 ---2.0 的使用差异


                                6、每个页面支持使用原声 title, 首页支持使用原声底部 tab, 这些是要在 pages.json里配置，这些并不是vue页面的一部分。
                                
                                          当然vue里的js api 也可以动态修改原生 title


                                7、虽然使用vue ， 但在 app 和 小程序里，不是 spa 而是mpa


                                8、位置坐标系统统一为国测局坐标系 gcj02 ，这种坐标系可以被多端支持。  

                                            老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll，这种坐标系需要转换。
                                            
                                            新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响，一直是gcj02
                    */

        </script>
    </body>
</html>